<template>
  <el-drawer :title="title" :visible.sync="visible" size="45%" @open="isVisible">
    <el-form
      v-if="record"
      disabled
      label-width="auto"
      label-position="left"
      style="padding: 10px;"
    >
      <el-form-item label="来访单位：">
        <el-input v-model="record.company_name" />
      </el-form-item>
      <el-form-item label="来访人员：">
        <el-input v-model="record.visitor" />
      </el-form-item>
      <el-form-item label="来访人职位：">
        <el-input v-model="record.visitor_position" />
      </el-form-item>
      <el-form-item label="来访人数：">
        <el-input v-model="record.fellow" />
      </el-form-item>
      <el-form-item label="来访时间：">
        <el-input v-model="record.arrive_time" />
      </el-form-item>
      <el-form-item label="来访原因：">
        <el-input v-model="record.reason" />
      </el-form-item>
      <el-form-item label="来访人联系电话：">
        <el-input v-model="record.phone" />
      </el-form-item>
      <el-form-item label="对接人：">
        <el-input v-model="record.docking.username" />
      </el-form-item>
      <el-form-item label="对接人部门：">
        <el-input v-model="record.department.name" />
      </el-form-item>
    </el-form>

    <el-form v-if="type === 'examine'" ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
      <el-form-item label="审批" prop="agree">
        <el-select v-model="ruleForm.agree" placeholder="请选择" @change="changeAgreeOption">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="isShow" label="拒绝理由" prop="fail_reason">
        <el-input v-model="ruleForm.fail_reason" type="textarea" :rows="2" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确定修改</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script>

export default {
  props: {
    record: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: 'examine'
    }
  },
  data() {
    return {
      visible: false,
      options: [
        {
          value: 1,
          label: '同意'
        },
        {
          value: 0,
          label: '拒绝'
        }
      ],
      isShow: false,
      ruleForm: {
        id: '',
        agree: '',
        fail_reason: ''
      },
      rules: {
        agree: [
          { required: true, message: '请选择审批状态', trigger: ['blur', 'change'] }
        ],
        fail_reason: [
          { required: true, message: '请输入拒绝理由', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.type === 'examine' ? '审批' : '查看详情'
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submitClick', this.ruleForm)
        } else {
          this.$message.error('请填写完整')
          return false
        }
      })
    },
    isVisible() {
      this.ruleForm.agree = ''
    },
    changeAgreeOption(e) {
      e === 1 ? this.isShow = false : this.isShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.demo-ruleForm {
  margin-left: 20px;
}
</style>
